<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { getNavList } from "@/api/navigation/index";
import type { NaviGaTionList } from "@/types/navigation";

const router = useRouter();

const navList = ref<NaviGaTionList[]>([]);

onMounted(() => {
  getList();
});

const getList = async () => {
  const res = await getNavList();
  console.log("导航菜单", res);
  navList.value = res.data;
};

const changeNav = (value: any) => {
  console.log("菜单详情", value);
  // 设置路由跳转
  router.push(value.router);
};
</script>

<template>
  <div class="nav">
    <el-menu
      v-for="item in navList"
      :key="item.id"
      :default-active="$route.path"
      :router="true"
    >
      <el-menu-item
        v-if="item.children?.length === 0"
        :index="item.router ? item.router : item.id"
      >
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.label }}</span>
      </el-menu-item>

      <el-sub-menu v-else :index="item.router ? item.router : item.id">
        <template #title>
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="childItem in item?.children"
            :key="childItem.id"
            :index="childItem.router ? childItem.router : childItem.id"
            >{{ childItem.label }}</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style lang="less" scoped>
.nav {
  max-height: 100vh;
}
</style>
